<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="referrer" content="origin">
    <title>微分销--登录页面</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-login.css"/>
</head>

<body>
<div class="login-box">
    <!--head-->
    <div class="py-container logoArea">
        <a href="" class="logo"></a>
    </div>
    <!--loginArea-->
    <div class="loginArea" id="loginApp">
        <div class="py-container login">
            <div class="loginform">
                <ul class="sui-nav nav-tabs tab-wraped">
                   
                    <li class="active">
                        <a href="#profile" data-toggle="tab">
                            <h3>账户登录</h3>
                        </a>
                    </li>
					<li class="">
                        <a href="#sms" data-toggle="tab">
                            <h3>短信登录</h3>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="profile" class="tab-pane  active">
                        <span v-text="msg"></span>
                        <form class="sui-form">
                            <div class="input-prepend"><span class="add-on loginname"></span>
                                <input id="username" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat"
                                    v-model="form.username">
                            </div>
                            <div class="input-prepend"><span class="add-on loginpwd"></span>
                                <input id="password" type="password" placeholder="请输入密码" class="span2 input-xfat"
                                    v-model="form.password">
                            </div>
                            
                            <div class="logined">
                                <a class="sui-btn btn-block btn-xlarge btn-danger" @click="login()"
                                   href="javascript:void(0)">登&nbsp;&nbsp;录</a>
                            </div>
                        </form>
                        <div class="otherlogin">
                            <div class="types">
                                <ul>
                                    <li><img src="img/qq.png" width="35px" height="35px"/></li>
                                    <li><img src="img/weixin.png"/></li>
                                </ul>
                            </div>
                            <span class="register"><a href="register.html" target="_blank">立即注册</a></span>
                        </div>
                    </div>

					<div id="sms" class="tab-pane  ">
                        <span v-text="msg"></span>
                        <form class="sui-form">
                            <div class="input-prepend"><span class="add-on loginname"></span>
                                <input id="phone" type="text" placeholder="手机号" class="span2 input-xfat"
                                    v-model="form1.phone">
                            </div>
                            <div class="input-prepend"><span class="add-on loginpwd"></span>
                                <input id="code" type="text" placeholder="验证码" class="span2 input-xfat"
                                    v-model="form1.code">
                            </div>
							<div class="input-prepend">
                                <button class="span2 input-xfat" v-model="countdown" :disabled="btnEnable" @click.prevent="getCode()">{{countdown}}</button>
                            </div>
                           
                            <div class="logined">
                                <a class="sui-btn btn-block btn-xlarge btn-danger" @click="loginCode()"
                                   href="javascript:void(0)">登&nbsp;&nbsp;录</a>
                            </div>
                        </form>
                        <div class="otherlogin">
                            <div class="types">
                                <ul>
                                    <li><img src="img/qq.png" width="35px" height="35px"/></li>
                                    <li><img src="img/weixin.png"/></li>
                                </ul>
                            </div>
                            <span class="register"><a href="register.html" target="_blank">立即注册</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--foot-->

    <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    <!-- 底部栏位 -->
    <!--页面底部版权信息，由js动态加载-->
    <div class="Mod-copyright"></div>
    <script type="text/javascript">$(".Mod-copyright").load("copyright.html");</script>
    <!--页面底部END-->

</div>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/pages/login.js"></script>
</body>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script >
// 全局配置
// axios.defaults.baseURL="http://localhost:8086/";

axios.interceptors.request.use(config=>{
    config.headers["token"]=sessionStorage.getItem("token");
    config.withCredentials= false
    return config;
})
axios.interceptors.response.use(function(response){
    return response.data;
})
    var loginVm = new Vue({
        el: "#loginApp",
        data: {
            form:{
                username:'jack',
                password:'123456',
                userType:'2'
            },
            form1:{
                phone:'',
                code:'',
                userType:'2'
            },
            msg:'',
			countdown:"获取验证码",
			btnEnable:false
        },
        methods:{
            login(){
              var userDto={username:this.form.username,password:this.form.password,userType:this.form.userType}
              axios.post("http://localhost:8085/login",userDto).then(res=>{
                  console.log(res)
                  sessionStorage.setItem("token",res.data)
                  location.href='index.html'
              }).catch(err=>{
                console.log(err)
              })
               
            },
            loginCode(){
                var jsonObj={username:this.form1.phone,password:this.form1.code,userType:this.form1.userType}
              axios.post("http://localhost:8085/loginCode",jsonObj).then(res=>{
                  sessionStorage.setItem("token",res.data)
                  location.href='index.html'
              }).catch(err=>{
                console.log(err)
              })

            },
			getCode(){
        
                axios.get("http://localhost:8085/sendCode?phone="+this.form1.phone).then(res=>{
                })
			   this.countdown = 60
			   this.btnEnable = true;
			   var _this = this;
			   //倒计时
			   setInterval(function(){
					if(_this.countdown>0){
						_this.countdown --
					}else{
					   _this.countdown = "获取验证码"
					   _this.btnEnable = false;
					}
					
			   },1000)
			
			}
        }
    });
</script>
</html>
